﻿<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>The Basic Language of the Web: HTML & CSS & Layouts CSSGrid</title>
  <link rel="stylesheet"
        href="styles/indexCSSGrid.css">
</head>
<body>

<div class="container">
  <header class="main-header clearfix">
    <h1>📘 The Code Magazine</h1>
    <nav>
      <a href="blog.html">Blog</a>
      <a href="#">Challenge</a>
      <a href="flexbox.html">Flexbox</a>
      <a href="css-grid.html">CSS Grid</a>
    </nav>

    <!--    <div class="clear"></div>-->
  </header>


    <article>
      <header class="post-header">
        <h2>The Basic Language of the Web: HTML</h2>

        <div class="author-box">
          <img src="img/5.jpg"
               alt="Headshot of Goat" height="50"
               width="50" class="author-img">
          <p id="author" class="author">
            Posted by <strong>GOAT Moriarty</strong>
            on Monday,June 21st 2027
          </p>
        </div>

        <img src="img/code.jpeg" alt="HTML code on a screen" width="500" height="200" class="post-image">
        <button>💖Like</button>
      </header>

      <p>All modern websites and web applications are built using three <em>fundamental</em> technologies:HTML/CSS and JavaScript.There are the language of the web.</p>
      <p>In this post,le's focus on HTML.We will learn what HTML is all about,and why you too should learn it.</p>

      <h3>What is HTML?</h3>
      <p>HTML stands for HyperText Makeup Language.It's a markup language that web developers use to structure and describe the content of a webpage(not a programming language).</p>

      <p>In HTML,each element is made up of 3 parts:</p>
      <ol>
        <li class="first-li">The opening tag</li>
        <li>The closing tag</li>
        <li>The actual element</li>
      </ol>
      <p>You can learn more at <a href="#">MDN Web Docs.</a></p>

      <h3>Why should you learn HTML?</h3>
      <p>There are countless reasons of learning the fundamental language of the web.Here are 5 of them:</p>
      <ul>
        <li class="first-li">To be able to use the fundamental web dev language</li>
        <li>To hand-craft beautiful websites instead of relying on tools like Worpress or Wix</li>
        <li>To build web applications</li>
        <li>To impress friends</li>
        <li>To have fun</li>
      </ul>
      <p>Hopefully you learned something new here.See you next time!</p>
    </article>

    <aside>
      <h4>Related Posts</h4>

      <ul class="related">
        <li class="related-post">
          <img src="img/5.jpg"
               alt="Person programming" />
          <div>
            <a href="#" class="related-link">How to
              Learn Web Development</a>
            <p class="related-author">By Joans
              Shims</p>
          </div>

        </li>
        <li class="related-post">
          <img src="img/22.jpg"
               alt="Person programming" />
          <div>
            <a href="#" class="related-link">How to
              Learn Web Development</a>
            <p class="related-author">By Laker
              Logs</p>
          </div>
        </li>
        <li class="related-post">
          <img src="img/33.jpg"
               alt="Person programming" />
          <div>
            <a href="#" class="related-link">How to
              Learn Web Development</a>
            <p class="related-author">By
              Liuchuanfeng Jan</p>
          </div>
        </li>
      </ul>
    </aside>



  <footer>
    <p id="copyright" class="copyright text">
      Copyright &copy; 2027 by the Code Goat
    </p>
  </footer>


</div>
</body>
</html>